<template>
	<view class="orderdetail" :style="data.ordertype == 5 ? 'padding-bottom: 99rpx;' : ''">
		<view class="top">
			<image src='../../static/businessImg/whiteback.png' class="topback" @click="back">
			</image>
			<view class="topname">
				{{computedTitle}}
			</view>
		</view>


		<view class="addressview" v-if="data.ordertype != 5">
			<view class="addressviewname">
				{{orderDetails.userName}}
				<view class="dataphone">
					{{orderDetails.userMobile}}
				</view>
			</view>

			<view class="addressviewaddress">
				{{orderDetails.address}}
			</view>
		</view>


		<view class="prolistview" :style="data.ordertype == 5 ? 'margin-top: 0' : ''">
			<view class="prolistviewitem">
				<image :src="orderDetails.image" class="prolistimg"></image>
				<view class="prolistname">
					{{orderDetails.name}}
				</view>
				<view class="prolistsku">
					{{data.specifications}} x{{orderDetails.num}}
				</view>

				<view class="prolistnum">
					
				</view>

				<view class="prolistprice">
					￥{{orderDetails.price}}
				</view>
			</view>

			<view class="remaker" v-if="data.ordertype == 5">
				<view class="remakertitle">
					备注
				</view>

				<view class="remakertext">
					{{orderDetails.remake}}
				</view>
			</view>
		</view>



		<view class="stepview" v-if="data.ordertype == 2 || data.ordertype == 3">
			<u-steps :list="numList" :current="0" direction="column" active-color="rgb(40,199,73)"></u-steps>
		</view>




		<view class="infoview" :style="data.ordertype == 2 || data.ordertype == 3 ? 'margin-top: 40rpx' : ''"
			v-if="data.ordertype != 5">

			<view class="infoviewitem">
				<view>
					商品总额
				</view>

				<view>
					{{orderDetails.price}}
				</view>
			</view>
			<view class="infoviewitem">
				<view>
					下单时间
				</view>

				<view>
					{{orderDetails.createTime}}
				</view>
			</view>

			<view class="infoviewitem">
				<view>
					付款时间
				</view>

				<view>
					{{orderDetails.paytime}}
				</view>
			</view>


			<view class="infoviewitem" v-if="data.ordertype == 2 || data.ordertype == 3">
				<view>
					发货时间
				</view>

				<view>
					{{data.sendTime}}
				</view>
			</view>


			<view class="infoviewitem" v-if="data.ordertype == 3">
				<view>
					完成时间
				</view>

				<view>
					{{data.endTime || ''}}
				</view>
			</view>
		</view>

		<view class="infoview" v-else>
			<view class="infoviewitem">
				<view style="width: 150rpx;">
					订单地址
				</view>

				<view style="font-size: 27rpx;color: #585D6C;line-height: 36rpx;text-align: right;">
					{{
					orderDetails.address
					}}
				</view>
			</view>

			<view class="infoviewitem">
				<view style="width: 150rpx;">
					物流公司
				</view>

				<view style="font-size: 27rpx;color: #585D6C;line-height: 36rpx;text-align: right;">
					{{orderDetails.logisticsName}}
				</view>
			</view>

			<view class="infoviewitem">
				<view style="width: 150rpx;">
					订单号
				</view>

				<view style="font-size: 27rpx;color: #585D6C;line-height: 36rpx;text-align: right;">
					{{orderDetails.orderNumber}}
				</view>
			</view>


			<view class="infoviewitem">
				<view style="width: 150rpx;">
					下单时间
				</view>

				<view style="font-size: 27rpx;color: #585D6C;line-height: 36rpx;text-align: right;">
					{{orderDetails.createTime}}
				</view>
			</view>


			<view class="infoviewitem">
				<view style="width: 150rpx;">
					支付方式
				</view>

				<view style="font-size: 27rpx;color: #585D6C;line-height: 36rpx;text-align: right;">
					{{orderDetails.payType == 1 ? '微信' : orderDetails.payType ==2 ? '支付宝' : ''}}
				</view>
			</view>



			<view class="infoviewitem">
				<view style="width: 150rpx;">
					完成时间
				</view>

				<view style="font-size: 27rpx;color: #585D6C;line-height: 36rpx;text-align: right;">
					{{orderDetails.endTime}}
				</view>
			</view>
		</view>
		<view class="lastview" v-if="data.ordertype == 5">
			<view class="lastbtn" v-if="data.orderstatus == 1">
				申请退款中
			</view>

			<view class="lastbtn2" v-else>
				已完成售后
			</view>
		</view>

		<!-- <view class="btn" @click="clickConfirm" v-if="data.ordertype == 1">
			确认发货
		</view> -->

		<u-modal v-model="show" :show-title="false" confirm-text="确认发货" ref="uModal" cancel-text="取消"
			:show-cancel-button="true" width="623" :async-close="true" @confirm="confirm" :cancel-style="cancelstyleobj"
			:confirm-style="confirmstyleobj" @cancel="cancel" v-if="data.ordertype == 1">
			<view class="slot-content">
				<u-form :model="form" ref="uForm" label-position="top">
					<u-form-item label="快递公司">
						<u-input v-model="form.kuaidigongsi" type="select" :border="true" @click="shows = true" />
					</u-form-item>
					<u-form-item label="订单号" prop="trandNo">
						<u-input v-model="form.trandNo" placeholder-style="color:#C5C9D2" placeholder="请输入订单号" />
					</u-form-item>
					<u-form-item label="备注" prop="remark">
						<u-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
					</u-form-item>
				</u-form>
			</view>
		</u-modal>


		<u-modal v-model="show2" confirm-text="确认" ref="uModal2" cancel-text="取消" title="是否确认退款"
			:show-cancel-button="true" width="618" :async-close="true" @confirm="confirm2"
			:cancel-style="cancelstyleobj" :confirm-style="confirmstyleobj" v-if="data.ordertype == 5"
			:title-style="titleObj">
			<view class="slot-content2">

			</view>
		</u-modal>


		<u-action-sheet :list="actionSheetList" v-model="shows" @click="actionSheetCallback" v-if="data.ordertype == 1">
		</u-action-sheet>
	</view>
</template>

<script>

import storage from '@/utils/storage.js';
import {
	orderDetails,
	sendOrder,
	orderRefund,

} from '@/api/storeAdmin.js'

import { expressList } from "@/api/gongyingshang.js"
export default {
	data() {
		return {
			form: {
				kuaidigongsi: '顺丰快递',
				trandNo: '',
				remark: ''
			},

			numList: [{
				name: '湖北武汉转运中心-已发往-湖北武汉沌口开发区 2019.02.15  10:41 星期五'
			}, {
				name: '湖北武汉转运中心-已发往-湖北武汉沌口开发区 2019.02.15  10:41 星期五'
			}, {
				name: '湖北武汉转运中心-已发往-湖北武汉沌口开发区 2019.02.15  10:41 星期五'
			}, {
				name: '湖北武汉转运中心-已发往-湖北武汉沌口开发区 2019.02.15  10:41 星期五'
			},],

			rules: {
				trandNo: [{
					required: true,
					message: '请输入单号',
					trigger: ['blur', 'change'],
				}],
				remark: [{
					required: true,
					message: '请输入备注',
					trigger: ['blur', 'change'],
				}]
			},
			shows: false,
			actionSheetList: [{
				text: '申通快递'
			},
			{
				text: '中通快递'
			}, {
				text: '圆通快递'
			},
			{
				text: '韵达快递'
			}, {
				text: '邮政EMS'
			},
			{
				text: '顺丰快递'
			}, {
				text: '极兔快递'
			},
			{
				text: '德邦快递'
			}

			],
			data: {},
			show: false,
			show2: false,
			orderDetails: {},
			titleObj: {
				'font-family': 'Source Han Sans CN',
				'font-weight': '500',
				'font-size': '53rpx',
				color: '#151F38'
			},
			cancelstyleobj: {
				width: '260rpx',
				height: '77rpx',
				'border-radius': '35rpx',
				'line-height': '77rpx',
				color: '#ffffff',
				'text-align': 'center',
				'font-size': '28rpx',
				'background-color': 'rgb(216,216,216)'
			},
			confirmstyleobj: {
				width: '260rpx',
				height: '77rpx',
				'border-radius': '35rpx',
				'line-height': '77rpx',
				color: '#ffffff',
				'text-align': 'center',
				'font-size': '28rpx',
				'background-color': 'rgb(146,207,56)',
				'margin-left': '33rpx'
			},
		}
	},



	onLoad(option) {
		let params = JSON.parse(decodeURIComponent(option.orderDetail));
		this.data = {
			...params
		}
	},

	onShow() {
		this.getOrderDetail();
		expressList().then(res => {

			let arr = res.data;
			let arr2 = [];
			arr.forEach(item => {
				arr2.push({
					text: item.name
				})
			})

			this.actionSheetList = arr2
			console.log(res)
		})
	},
	methods: {
		back() {
			uni.navigateBack({
				delta: 1
			});
		},

		getOrderDetail() {
			orderDetails({
				id: this.data.id
			}).then(res => {
				this.orderDetails = res.data
			})
		},

		confirm() {
			let that = this
			this.$refs.uForm.setRules(this.rules);
			this.$refs.uForm.validate(boo => {
				if (boo) {

					sendOrder({
						logisticsName: that.form.kuaidigongsi,
						logisticsNumber: that.form.logisticsNumber,
						orderId: that.orderDetails.id
					}).then(res => {
						uni.navigateTo({
							url: '/pages/business/index?current=1'
						})
					})

				} else {
					this.$refs.uModal.clearLoading();
				}
			})
		},

		confirm2() {
			let that = this
			orderRefund({
				id: this.orderDetails.id
			}).then(
				res => {
					
					if (res.code == '000000') {
						uni.showToast({
							title: '成功',
							icon: 'none'
						});
								
						that.show2 = false
						that.getOrderDetail()
						
					}else{
						that.show2 = false;
						uni.showToast({
							title: res.message,
							
						});
					}
					
					
				})

		},

		cancel() {
			this.form = {
				kuaidigongsi: '顺丰快递',
				trandNo: '',
				remark: ''
			}
			this.$refs['uForm'].resetFields();
		},
		clickConfirm() {
			this.form = {
				kuaidigongsi: '顺丰快递',
				trandNo: '',
				remark: ''
			}
			this.show = true;

		},
		actionSheetCallback(val) {
			this.$set(this.form, 'kuaidigongsi', this.actionSheetList[val].text)
		},
		handletuikuanclick() {
			this.show2 = true
		}
	},
	computed: {
		computedTitle() {

			if (this.data.ordertype == 1) return '买家已付款'
			if (this.data.ordertype == 2) return '商品运输中'
			if (this.data.ordertype == 3) return '订单已完成'
			if (this.data.ordertype == 5 && this.data.orderstatus == 1) return '退款中'
			if (this.data.ordertype == 5 && this.data.orderstatus == 2) return '已完成'
		}
	}
}
</script>

<style scoped>
.orderdetail {
	width: 100%;
	min-height: 100vh;
	/* background: #F9F9F9; */
}

.top {
	width: 100%;
	height: 259rpx;
	position: relative;
	background: rgb(254, 119, 12);
}

.top2 {}

.topback {
	width: 16rpx;
	height: 29rpx;
	position: absolute;
	top: 106rpx;
	left: 32rpx;
}

.topname {
	width: 300rpx;
	height: 32rpx;
	text-align: center;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 33rpx;
	color: #FFFFFF;
	line-height: 32rpx;
	position: absolute;
	top: 105rpx;
	left: 50%;
	transform: translateX(-50%);
}

.addressview {
	width: 710rpx;
	height: 164rpx;
	position: relative;
	top: -50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 43rpx 30rpx 45rpx;

}

.addressviewname {
	width: 100%;
	height: 48rpx;
	line-height: 20rpx;
	font-family: PingFang;
	font-weight: 500;
	font-size: 29rpx;
	color: #101624;
}

.dataphone {
	display: inline-block;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 27rpx;
	color: #9196A2;
	padding-left: 20rpx;
}

.addressviewaddress {
	width: 100%;
	height: 27rpx;
	line-height: 27rpx;
	font-family: PingFang;
	font-weight: 500;
	font-size: 27rpx;
	color: #3D4354;
}


.prolistview {
	width: 708rpx;
	margin: -60rpx auto;
	background: #FFFFFF;
	padding: 27rpx 20rpx;
}

.prolistviewitem {
	width: 100%;
	height: 104rpx;
	margin-bottom: 28rpx;
	position: relative;
}

.prolistimg {
	width: 104rpx;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.prolistname {
	width: 500rpx;
	height: 27rpx;
	font-family: PingFang;
	font-weight: bold;
	font-size: 27rpx;
	color: #151F38;
	line-height: 27rpx;
	position: absolute;
	top: 5rpx;
	left: 139rpx;
}

.prolistsku {
	font-family: PingFang;
	font-weight: 500;
	font-size: 23rpx;
	color: #878C9A;
	height: 23rpx;
	line-height: 23rpx;
	position: absolute;
	bottom: 8rpx;
	left: 141rpx;
}

.prolistnum {
	font-family: PingFang;
	font-weight: 500;
	font-size: 25rpx;
	color: #878C9A;
	height: 23rpx;
	line-height: 23rpx;
	position: absolute;
	bottom: 8rpx;
	right: 140rpx;
}

.prolistprice {
	height: 23rpx;
	line-height: 23rpx;
	position: absolute;
	bottom: 8rpx;
	right: 2rpx;
	font-family: PingFang;
	font-weight: 500;
	font-size: 29rpx;
	color: #101624;
}

.remaker {
	width: 100%;
	height: 132rpx;
	border-top: 2rpx solid #f3f3f3;
}

.remakertitle {
	width: 100%;
	padding-top: 21rpx;
	padding-bottom: 21rpx;
	font-family: PingFang;
	font-weight: bold;
	font-size: 27rpx;
	color: #101624;
}

.remakertext {
	width: 100%;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 27rpx;
	color: #585D6C;
}

.infoview {
	width: 710rpx;
	padding: 0 21rpx;
	margin: 90rpx auto 0;
	background: #FFFFFF;
}

.infoviewitem {
	width: 100%;
	height: 95rpx;
	line-height: 95rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: Source Han Sans CN;
	font-weight: 500;
	font-size: 27rpx;
	color: #101624;
	border-bottom: 2rpx solid #f3f3f3;
}

.btn {
	width: 336rpx;
	height: 81rpx;
	text-align: center;
	line-height: 81rpx;
	margin: 80rpx auto 0;
	background: rgb(40, 199, 73);
}

.slot-content {
	width: 100%;
	padding: 40rpx;
	height: 700rpx;
}

.slot-content2 {
	width: 100%;
	height: 100rpx;
}

::v-deep .u-model__footer__button {
	flex: none;

}

::v-deep .u-model__footer {
	justify-content: space-around;
	/* padding-bottom: 20rpx; */
	height: 100rpx;
	align-items: center;
}

::v-deep .uni-input-input {
	/* background: rgb(244, 244, 244); */
	border-radius: 10rpx;
	/* padding-left: 10rpx; */
	border: 1rpx solid rgb(244, 244, 244);
}

::v-deep .u-input--border {
	padding: 0 !important;
}

::v-deep .uni-textarea-textarea {
	/* background: rgb(244, 244, 244); */
	border: 1rpx solid rgb(244, 244, 244);
}


::v-deep .u-steps .u-steps__item {
	text-align: left !important;
}

::v-deep .u-steps .u-steps__item__dot {
	width: 35rpx;
	height: 22rpx;
	border-radius: 0;
}

.stepview {
	width: 708rpx;
	margin: 0 auto;
	margin-top: 90rpx;
	padding: 0 47rpx;
	background: #FFFFFF;
}

.lastview {
	width: 100%;
	position: fixed;
	bottom: 0;
	background: #FFFFFF;
	height: 99rpx;
}

.lastbtn {
	width: 169rpx;
	height: 64rpx;
	border-radius: 30rpx;
	text-align: center;
	line-height: 64rpx;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 29rpx;
	color: #92CF38;
	border: 2rpx solid #92CF38;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 42rpx;
}

.lastbtn2 {
	width: 195rpx;
	height: 64rpx;
	border-radius: 30rpx;
	text-align: center;
	line-height: 64rpx;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 29rpx;
	color: #FFFFFF;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 42rpx;
	background: rgb(214, 214, 214);
}
</style>
